<template>
	<div>
		<h1><button  @click="fwbShow=!fwbShow"> {{!fwbShow?"开启":"关闭"}}富文本</button></h1>
		<div class="talk_con">
			<div class="talk_show" id="words" v-html="words" />
			<div class="talk_input">
				<tinyEdit v-model="obj.account" v-if="fwbShow" class="talk_word" />
				<input type="text" v-else class="talk_word" v-model="obj.account" placeholder="请输入发送内容" @keyup.enter="contentSubmitClick"/>
				<button class="talk_word" style="width:70px;min-height: 40px;"  @click="contentSubmitClick">发送</button>
			</div>
		</div>
	</div>
</template>

<script>
	import { getUser } from '@/api/webscoket.ts'
	import { getLocal } from '@/utils/localStorage'
	import { message } from "ant-design-vue"
	import tinyEdit from '@/components/tinymce.vue'
	export default {
		data() {
			return {
				fwbShow:false,
				obj: {
					ipId: returnCitySN["cip"],
					name: JSON.parse(getLocal("userMessage")).name,
					account: ""
				},
				words: "",
			}
		},
		components:{
			tinyEdit
		},
		mounted() {
			var that = this
			var ws = new WebSocket('ws://39.103.131.74:3000');
			ws.onopen = function() {
				var str = '<div class="btalk"><span> ' + 'webScoket连接成功' + '</span></div>';
				that.words = that.words + str;
			};
			ws.onmessage = function(e) {
				var data = JSON.parse(e.data)
				if (that.obj.ipId !== data.ipId) {
					var str = '<div class="atalk"><span>' + data.name + ':'+'<br/>' + data.account + '</span></div>';
				} else {
					var str = '<div class="btalk"><span> ' + data.name + ':' + data.account + '</span></div>';
				}
				that.words = that.words + str;
			};
		},
		methods: {
			contentSubmitClick() {
				if (this.obj.account) {
					getUser(this.obj).then(res=>{
						this.obj.account = ""
					})
				} else {
					message.error("发送内容不能为空",1)
				}
			}
		}
	}
</script>

<style scoped lang="less">
	 .talk_con {
		max-width: 600px;
		min-height: 500px;
		border: 1px solid #666;
		margin: 50px auto 0;
		background: #f9f9f9;
	}

	 .talk_show {
		max-width: 580px;
		height: 420px;
		border: 1px solid #666;
		background: #fff;
		margin: 10px auto 0;
		overflow: auto;
	}

	 .talk_input {
		display: flex;
		flex-flow: row nowrap;
		max-width: 580px;
		margin: 10px auto 0;
	}

	 .whotalk {
		max-width: 80px;
		min-height: 30px;
		float: left;
		outline: none;
	}

	 .talk_word {
		max-width: 510px;
		width: 100%;
		// min-height: 40px;
		padding: 0px;
		// border: 1px #111111 solid;
		float: left;
		outline: none;
		// text-indent: 10px;
	}

	 .talk_sub {
		width: 56px;
		min-height: 30px;
		float: left;
		margin-left: 10px;
	}

	/deep/ .atalk {
		margin:10px 10px 0 10px;
		text-align: left;
	}

	/deep/ .atalk {
		span {
			display: inline-block;
			display: flex;
			flex-flow: row nowrap;
			background: #0181cc;
			border-radius: 10px;
			color: #fff;
			padding: 5px 10px;
			max-width: 80%;
			p{
				margin-bottom: 0;
			}
		}

	}

	 /deep/.btalk {
		margin:10px 10px 0 10px;
		text-align: right;
	}

	/deep/ .btalk {
		span {
			display: inline-block;
			background: #ef8201;
			border-radius: 10px;
			color: #fff;
			padding: 5px 10px;
			max-width: 80%;
			p{
				margin-bottom: 0;
			}
		}

	}
</style>
